<template>
    <!-- 日期范围选择框 -->
    <div :style="item.style || {}" :class="`form-unqiue-${item.key} ${getTextModel ? '' : 'wti-untext-box'}`">
        <el-date-picker
            v-if="!getTextModel"
            v-model="val"
            type="daterange"
            style="width: 100%;"
            :disabled="getDisabled"
            class="1111"
            :class="{ 'placeholder-error-tip': error }"
            :start-placeholder="error || getDateRangePlaceholder(item)[0]"
            :end-placeholder="error || getDateRangePlaceholder(item)[1]"
            value-format="yyyy-MM-dd"
            :clearable="true"
            v-bind="bindOptions"
            @blur="e => onBlur(item, e)"
            @focus="e => onFocus(item, e)"
        />
        <div v-else :style="item.textStyle || {}" class="form-input-text">
            {{ textModelValue || '' }}
        </div>
    </div>
</template>

<script>
import FormMixin from './mixin'

export default {
    name: 'FormDateRange',
    mixins: [FormMixin],
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    computed: {
        val: {
            get() {
                if (this.value) {
                    return JSON.parse(this.value)
                } else {
                    return []
                }
            },
            set(v) {
                this.$emit('input', JSON.stringify(v))
                // 只有非子表单的情况下，才会冒泡上去数据变更
                if (this.formItemType !== 'childForm') {
                    this.statusChangeFn.valueUpdateEvent({
                        [this.item.key]: v
                    })
                } else {
                    // 如果是子表单的话，执行内置的变更
                    this.childChangeData.valueUpdateEvent()
                }
            }
        },
        textModelValue() {
            return this.val && this.val.join('至')
        }
    }
}
</script>

<style scoped lang="scss"></style>
